<template>
    <h1>NEWS</h1>
    <div style="margin: 0 3%" class="newsContainer">
        <div class="news" v-for="item in news" :key="item.id">
            <RouterLink :to="{
                    name: item.router,
                    params:{
                        commonTitle: item.commonTitle,
                        category: item.category,
                        date: item.date,
                        pic: item.pic,
                        content: item.content
                    }
                }">
                <img :src="item.pic" alt="">
                <div class="newsInfo">
                    <p class="category">{{ item.category }}</p>
                    <p class="title">{{ item.title }}</p>
                </div>
            </RouterLink>
        </div>
    </div>
</template>

<script setup>
defineProps(['news'])
</script>

<style scoped>
h1 {
    font-size: 34px;
    font-weight: bold;
    margin-bottom: 48px;
    text-align: center;
}

.newsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.news {
    width: calc(50% - 20px);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.news a {
    text-decoration: none;
}

.news:hover {
    transform: scale(1.02);
}

.news img {
    width: 100%;
    height: auto;
}

.newsInfo {
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

.category {
    color: #fb4a9d;
    font-size: 14px;
    text-transform: uppercase;
}

.title {
    color: #000;
    font-size: 24px;
}
</style>